<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:common="http://www.frenjoynet.rs/frenjoynet/core/ui"
      xmlns:core="http://www.contact.core.com/contacts/core/ui"
      xmlns:a4j="http://richfaces.org/a4j"
  >
<ui:component>


    <a4j:loadScript src="resource://META-INF/music/core/ui/script/googlemaps.js"/>
    <a4j:loadScript src="resource://META-INF/music/core/ui/script/polygone.js"/>



<h:panelGrid columns="1">

    <h:panelGrid columns="2">

        <rich:gmap style="width:400px;height:400px"
                   id="map_canvas"
                   oninit="createMap();"
                />
        <!--<h:form onsubmit="centerMap()">-->
        <h:panelGroup layout="block">
            <h:panelGrid columns="1">
                <h:panelGrid columns="2">
                    <h:outputLabel value="Latitude"/>
                    <h:inputText id="txtLatitude"/>

                    <h:outputLabel value="Longitude"/>
                    <h:inputText id="txtLongitude"/>

                    <h:outputLabel value="Zoom level"/>
                    <h:panelGrid columns="2">
                        <h:inputText id="txtLevel" value="3"/>
                        <h:commandButton onclick="addPoint();" value="Add Point"/>
                    </h:panelGrid>

                </h:panelGrid>
                <h:selectManyListbox ondblclick="jumpToPoint();"
                                     onchange="highlight(this.selectedIndex)"
                                     id="pointList" size="10"
                        value=""/>
                <h:panelGrid columns="2">
                    <h:commandButton onclick="deletePoint();" value="Delete Selected"/>
                    <h:commandButton onclick="deleteAllPoints();" value="Delete All Point"/>
                    <h:inputHidden id="txtHidden" value=""/>

                </h:panelGrid>
            </h:panelGrid>

        </h:panelGroup>
        <!--</h:form>-->
    </h:panelGrid>
    <h:panelGrid columns="2">
        <h:outputLabel value="Encoded polyline"/>
        <h:inputText  size="100" id="encodedPolyline"/>

        <h:outputLabel  value="Encoded levels"/>
        <h:inputText size="100" id="encodedLevels"/>

        <h:commandButton onclick="decode();" value="Decode"/>

        <h:commandButton onclick="simulator();" value="Simulate road"/>

    </h:panelGrid>
    <!--<h:panelGrid columns="2" columnClasses="optionList">-->
    <!--<h:outputText value="Controls:"/>-->
    <!--<h:panelGroup>-->
    <!--<a href="javascript: void 0" onclick="map.hideControls()">Hide</a>-->
    <!--<a href="javascript: void 0" onclick="map.showControls()">Show</a><br/>-->

    <!--</h:panelGroup>-->
    <!--<h:form>-->
    <!--<a4j:commandLink value="Init" onclick="initialize(); setPointIcon(); normalMap(); "/>-->
    <!--</h:form>-->
    <!--</h:panelGrid>-->
</h:panelGrid>


</ui:component>

</html>
